<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>动态效果 - 圆</title>
	<script src="d3/d3.v3.min.js" charset="utf-8"></script>
	<style>
.axis path,
.axis line{
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}

.axis text {
    font-family: sans-serif;
    font-size: 11px;
}
	</style>
</head>
<body>

</body>
<script type="text/javascript">



//画布大小
var width = 800;
var height = 800;

//在 body 里添加一个 SVG 画布   
var svg = d3.select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

//第一个圆
var circle1 = svg.append("circle")
	.attr("cx", 100)
	.attr("cy", 100)
	.attr("r", 45)
	.style("fill","green");

//在1秒（1000毫秒）内将圆心坐标由100变为300
circle1.transition()
    .duration(1000)
    .attr("cx", 300);

//第二个圆
var circle2 = svg.append("circle")
	.attr("cx", 100)
	.attr("cy", 200)
	.attr("r", 45)
	.style("fill","green");

//在1.5秒（1500毫秒）内将圆心坐标由100变为300，将颜色从绿色变为红色
circle2.transition()
    .duration(1500)
    .attr("cx", 300)
    .style("fill","red");

//第三个圆
var circle3 = svg.append("circle")
	.attr("cx", 100)
	.attr("cy", 300)
	.attr("r", 45)
	.style("fill","green");

//在2秒（2000毫秒）内将圆心坐标由100变为300，将颜色从绿色变为红色，将半径从45变成25,过渡方式采用bounce（在终点处弹跳几次）
circle3.transition()
    .duration(2000)
    .ease("bounce")
    .attr("cx", 300)
    .style("fill","red")
    .attr("r", 25);




</script>
</html>
